import {AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import swal, { SweetAlertType } from 'sweetalert2';
import {ActivatedRoute} from "@angular/router";
import {HttpService} from "@core/services/http.service";
import {LogicComponent} from "../logic/logic.component";

@Component({
    selector: 'app-center',
    templateUrl: './center.component.html',
    styleUrls: ['./center.component.less']
})
export class CenterComponent implements OnInit {
    @ViewChild('centerBox') private myScrollContainer: ElementRef;
    @ViewChild(LogicComponent) LogicComponent: LogicComponent;
    @Input()
    node_id = [];
    @Input()
    gids = [];
    @Input()
    n_name;
    @Input()
    n_type;
    @Input()
    p_id;
    @Input()
    g_id;
    @Input()
    type_name;

    @Input() inLogics;
    @Input() multiLogics;
    @Input()
    nextNodes = []
    logicActive = false;
    pointerEvents = true;
    componentList = [];
    logic = [];
    multiLogic = [];
    editing;
    resizeing;
    currentId;
    canMove = false;
    mouseDownX;
    mouseDownY;
    preX;
    preY;

    initData = {
        txt: '请输入文字',
        img: './assets/img/default-img.png',
        web: '请添加网页链接',
        pdf: '请上传PDF',
        video: '请上传视频',
        audio: '请上传音频',
        button: '请添加按钮文字'
    }

    @Output() onDropEnd = new EventEmitter<object>();
    @Output() onMove = new EventEmitter<object>();
    @Output() onResize = new EventEmitter<object>();
    @Output() toggleEvent = new EventEmitter<object>();
    @Input() componentType;
    @Input() canDrag;
    origin = {
        left: 0,
        top: 0
    };
    @Input() rect;
    _scale;
    @Input()
    set scale(value) {
        this._scale = value;
        const width = this.myScrollContainer.nativeElement.offsetWidth;
        const height = this.myScrollContainer.nativeElement.offsetHeight;
        const scrollTop = this.myScrollContainer.nativeElement.scrollTop;
        const scrollLeft = this.myScrollContainer.nativeElement.scrollLeft;

        this.origin.left = Math.ceil(scrollLeft + width / 2);
        this.origin.top = Math.ceil(scrollTop + height / 2);
    }

    get scale() {
        return this._scale;
    }

    @Input()
    set styleObject(styleObject: object) {
        if (this.componentList.length !== 0) {
            for (const key in styleObject) {
                this.componentList[this.currentId].style[key] = styleObject[key];
            }
        }
    }

    @Input()
    set dataObject(dataObject: object) {
        if (this.componentList.length !== 0) {
            for (const key in dataObject) {
                this.componentList[this.currentId].data[key] = dataObject[key];
            }
        }

    }

  constructor(public el: ElementRef, private activeRoute: ActivatedRoute, public http: HttpService) { }

  ngOnInit() {
  }


    dropend($event) {

        $event.preventDefault();
        this.pointerEvents = true;
        if (!this.canDrag || this.componentList.some(this.someOne) && this.componentType !== 'SG_bullet') {

            swal(`该场景下不可添加组件!`, '', 'info');
            return false;
        }
        if ((this.componentType === 'SG_tieba' || this.componentType === 'SG_weibo'
                || this.componentType === 'SG_QQ' || this.componentType === 'SG_brain'
                || this.componentType === 'SG_causal' || this.componentType === 'SG_mindmap'
                || this.componentType === 'SG_vote' || this.componentType === 'SG_checkbox'
                || this.componentType === 'SG_audio' || this.componentType === 'SG_judgement'
                || this.componentType === 'SG_guess' || this.componentType === 'SG_subjective'
                || this.componentType === 'SG_special_battle' || this.componentType === 'SG_seek'
                || this.componentType === 'SG_tnfbgroup'
                || this.componentType === 'SG_originality_case'|| this.componentType === 'SG_sixHat'
                || this.componentType === 'SG_turns_speak' || this.componentType === 'SG_infoext')
            && this.componentList.length > 0) {
            swal(`该场景已添加组件,请删除后添加`, '', 'info');
            return false;
        }

        this.componentList.push({
            name: this.componentType,
            style: {
                x: $event.offsetX,
                y: $event.offsetY,
                width: 'auto',
                height: 'auto',
            },
            data: {
                text: '',
                src: '',
                target: '',
                selectData: [],
                fillData: {
                    fillName: '',
                    fillImg: '',
                    title: '',
                    content: '',
                    anwser: '',
                    key: '',
                    time: '',
                    line: ''
                },
                limit: {
                    answerMax: 0,
                    gourpMax: 0,
                    offline: false
                },
                origin: {
                    roundArr: [],
                    groupTwo: {
                        originGroup: {
                            originGroupArr: [],
                            name: ''
                        },
                        consumerGroup: {
                            name: '',
                            groupIdTwo: '',
                            img: '',
                            num: 0,
                            now: 0
                        }
                    },
                    hasConsumer: false,
                    questionTile: ''
                }
            },
            choose_n_id:[],
            p_id:this.p_id

        });

        this.currentId = this.componentList.length - 1;

        this.onDropEnd.emit({
            componentToolType: this.componentType,
            rightStyleX: $event.offsetX,
            rightStyleY: $event.offsetY,
            rightStyleW: 'auto',
            rightStyleH: 'auto',
            rightData: this.componentList[this.currentId].data
        });
    }

    saveAllLogic($event) {
        this.logic = $event;
    }

    saveAllMultiLogic($event) {
        this.multiLogic = $event;
    }

    dragover($event) {
        $event.preventDefault();
        this.pointerEvents = false;
    }

    onElementDown($event) {
        this.currentId = $event.id;
       // console.log($event);
        this.toggleEvent.emit({
            rightStyleX: this.componentList[this.currentId].style.x,
            rightStyleY: this.componentList[this.currentId].style.y,
            rightStyleW: this.componentList[this.currentId].style.width,
            rightStyleH: this.componentList[this.currentId].style.height,
            rightData: this.componentList[this.currentId].data,
            componentToolType: this.componentList[this.currentId].name
        });
        if (this.resizeing) return false;
        this.canMove = true;
        this.mouseDownX = $event.event.clientX;
        this.mouseDownY = $event.event.clientY;
        this.preX = this.componentList[this.currentId].style.x;
        this.preY = this.componentList[this.currentId].style.y;
    }

    onResizeStart($event, id) {
        this.resizeing = true;
    }

    onResizing($event, id) {
        this.componentList[this.currentId].style.width = $event.size.width;
        this.componentList[this.currentId].style.height = $event.size.height;

        this.onResize.emit({
            rightStyleW: this.componentList[this.currentId].style.width,
            rightStyleH: this.componentList[this.currentId].style.height
        });
    }

    onResizeEnd($event, id) {
        if (!this.resizeing || id !== this.currentId) return false;
        this.resizeing = false;
    }

    onMouseMove($event) {
        $event.preventDefault();
        if (!this.canMove || this.resizeing) {

        } else {
            this.componentList[this.currentId].style.x = Math.ceil(this.preX + ($event.clientX - this.mouseDownX) / (this.scale || 1));
            this.componentList[this.currentId].style.y = Math.ceil(this.preY + ($event.clientY - this.mouseDownY) / (this.scale || 1));
            this.onMove.emit({
                rightStyleX: this.componentList[this.currentId].style.x,
                rightStyleY: this.componentList[this.currentId].style.y
            });
        }
        return false;
    }

    onMouseUp() {
        this.canMove = false;
    }

    onDoubleClick(id) {
        this.editing = true;
        this.componentList[id].style.canEdit = true;
    }

    onBlur(id) {
        this.editing = false;
        this.componentList[id].style.canEdit = false;
    }

    onMouseLeave() {
        this.canMove = false;
    }


    onDataChange($event, id) {
        this.dataObject = $event;
    }

    logicToggle() {
        this.logicActive = !this.logicActive;
    }

    someOne(data, index, arr) {
        const name = data.name;
        return name === 'SG_tieba' || name === 'SG_weibo' || name === 'SG_QQ' || name === 'SG_brain';
    }
}
